<template>
  <div
    id="course">
    <div class="course_contant">
      <div
        class="course_add"
        v-for="(item,index) in listdata"
        :key="index">
          <div class="course_list">
                <uni-list-item
                   showArrow
                   :custom="true"
                   title="时间"
                  @click="selectDate(index)">
                    <div class="company_date">
                      {{item.addtime}}
                    </div>
                </uni-list-item>
                <uni-list-item title="内容" :custom="true" :showArrow="false">
                  <input class="company_content" v-model="item.content" placeholder="请输入内容"/>
                </uni-list-item>
          </div>
        <div
          class="delete_expe"
          @click="remove(item,index)">
          <img
            :src="`${constant.imgUrl}center/icon_deleuser.png`"
            alt="删除">
        </div>
      </div>
      <div
        class="addcontent"
        @click="add_record">
        <text class="iconfont iconicon-test"/>添加
      </div>
    </div>
    <footer
	  class="app-footer"
      @click="savecourse">保存</footer>
      <w-picker
	  		:defaultVal="date"
			mode="yearMonth"
			@confirm="onConfirm"
			ref="region"
			themeColor="#f00"
		></w-picker>
  </div>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import $apiCompany from '@/api/company'
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
import wPicker from '@/components/w-picker/components/w-picker.vue'
export default {
	name: 'Course',
	inject: ['saveSuccee', 'queryData'],
	components: {
		uniPopup,
		uniList,
		uniListItem,
		wPicker
	},
	data() {
		return {
			date: [49, 8],
			checked: false,
			listdata: [],
			minDate: new Date(1976, 1),
			currentDate: new Date(),
			indexs: '',
			formate: '',
			id: 0,
			constant: this.$constant,
			query: null
		}
	},
	mounted() {
		this.query = this.queryData()
		this.getcourse()
	},
	methods: {
		onConfirm(val) {
			this.listdata[this.indexs].addtime = val.result.split('-')[0] + '年' + val.result.split('-')[1] + '月'
			this.listdata[this.indexs].timegt = val.result
		},
		getcourse() {
			const pragrams = {
				company_id: this.query.owner_user_id
			}
			$apiCompany.getCourse(pragrams).then((res) => {
				if (res.status == 'success') {
					if (this.$util.isEmpty(res.data)) {
						this.listdata.push({
							addtime: '',
							timegt: '',
							content: '',
							title: '添加的模板消息'
						})
					} else {
						this.listdata = res.data.map(i => ({
							...i,
							addtime: `${i.addtime.split('-')[0]}年${i.addtime.split('-')[1]}月`,
							timegt: i.addtime,
							content: i.content,
							title: '添加的模板消息'
						}))
					}
				} else {
					uni.showToast({
						title: res.errors.message,
						icon: 'none'
					})
				}
			})
		},
		selectDate(index) { // 选择时间
			this.$refs.region.show()
			this.indexs = index
		},
		delete(id, index) {
			$apiCompany.deleteCourse({
				id
			}).then((res) => {
				if (res.status == 'success') {
					this.listdata.splice(index, 1)
				} else {
					uni.showToast({
						title: res.errors.message,
						icon: 'none'
					})
				}
			})
		},
		add_record() { // 添加
			this.id++
			const data = {
				addtime: '',
				timegt: '',
				content: '',
				id: this.id,
				title: '添加的模板消息'
			}
			this.listdata.push(data)
		},
		remove(item, index) { // 删除
		    let that = this
			uni.showModal({
				title: '提示',
				content: '你确定要删除吗?',
				success: (res) => {
					if (res.confirm) {
						that.delete(item.id, index)
					} else if (res.cancel) {
						console.log('用户点击取消')
					}
				}
			})
		},
		confirm() { // 提交
			const d = this.currentDate
			const index = this.indexs
			const datetime = `${d.getFullYear()}年${d.getMonth() + 1}月`
			const guodata = `${d.getFullYear()}-${d.getMonth() + 1}`
			this.listdata[index].addtime = datetime
			this.listdata[index].timegt = guodata
			this.formate = guodata
		},
		 savecourse() {
			const pargams = this.listdata.map(i => ({
				addtime: i.timegt,
				content: i.content
			}))
			$apiCompany.addCourse({
				lists: pargams
			}).then((res) => {
				if (res.status == 'success') {
					this.getcourse()
					this.saveSuccee()
				} else {
					uni.showToast({
						title: res.errors.message,
						icon: 'none'
					})
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
    .course_contant {
        width: 100%;
        height: auto;
    }

    .course_add {
        width: 90%;
        height: auto;
        margin-left: 5%;
        background: white;
        margin-top: 40px;
        border-radius: 20px;
        padding-bottom: 20px;
        position: relative;
    }

    .course_top {
        height: 110px;
        width: 94%;
        margin-left: 3%;
        line-height: 110px;
        border-bottom: 1px solid #cccccc;
        background: url($imgUrl + 'center/icon_right_arrow_large.png') right center / 15px 28px no-repeat;
    }
    .company_content {
      height: 100px!important;
      width: 100%;
    }
    .addcontent {
        width: 90%;
        font-size: 24px;
        height: 100px;
        color: #ff6900;
        margin-left: 5%;
        border-radius: 20px;
        text-align: center;
        background: #ffffff;
        margin-top: 20px;
        letter-spacing: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .iconfont.iconicon-test {
      font-size:28px;
    }
    textarea {
      width: auto;
    }

    .delete_expe {
        width: 60px;
        height: 60px;
        position: absolute;
        right: -20px;
        top: -20px;
        // float: right;
		@include direction(center, center);
    }
     .delete_expe img {
        width: 30px;
        height: 30px;
        // float: left;
    }
    .company_date{
      text-align: left;
      width: 100%;
    }
</style>
